import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import { View } from "@tarojs/components";
import { AtButton, AtProgress, AtRadio } from "taro-ui";
import "./index.scss";
import { GlobalFooter } from "../../components/GlobalFooter";
import questions from "../../data/question.json";

export default () => {
  // 当前题目
  const [currentQuestion, setCurrentQuestion] = useState(questions[0]);
  // 当前题目编号
  const [currentNo, setCurrentNo] = useState<number>(1);
  // 当前题目答案
  const [currentAnswer, setCurrentAnswer] = useState<string>();

  const [percent, setPercent] = useState<number>();
  const [status, setStatus] = useState<string>("progress");

  // 回答答案列表
  const [answers] = useState<string[]>([]);

  const questionoptions: any[] = currentQuestion.options.map((item) => {
    return {
      label: `${item.key}. ${item.value}`,
      value: `${item.key}`,
    };
  });
  const nextQuestion = () => {
    setCurrentNo(currentNo + 1);
  };
  const prevQuestion = () => {
    setCurrentNo(currentNo - 1);
  };
  const finishQuestion = (value: string) => {
    // 记录答案
    setCurrentAnswer(value);
    // 添加到答案列表
    answers[currentNo - 1] = value;
  };

  useEffect(() => {
    // 切换题目
    setCurrentQuestion(questions[currentNo - 1]);
    // 切换答案
    setCurrentAnswer(answers[currentNo - 1]);
    if (currentNo == questions.length) {
      setStatus("success");
    }else {
      setStatus("progress");
    }
    setPercent((currentNo / questions.length) * 100);
  }, [currentNo]);

  useEffect(() => {
    setPercent((currentNo / questions.length) * 100);
  }, []);

  return (
    <View className="doQuestionPage">
      <View className="at-article__h2 title">
        <AtProgress percent={percent} status={status} />
        {currentNo}. {currentQuestion.title}
      </View>
      {JSON.stringify(answers)}
      <View className="options-wrapper">
        <AtRadio
          options={questionoptions}
          onClick={finishQuestion}
          value={currentAnswer}
        />
      </View>
      {currentNo < questions.length && (
        <AtButton
          type="primary"
          circle
          className="controlBtn"
          onClick={nextQuestion}
        >
          下一题
        </AtButton>
      )}
      {/* 最后一题才能看结果*/}
      {currentNo == questions.length && (
        <AtButton
          type="primary"
          circle
          className="controlBtn"
          onClick={() => {
            const urlParams = JSON.stringify(answers);
            Taro.navigateTo({
              url:
                "/pages/result/index" +
                `?data=${encodeURIComponent(urlParams)}`,
            });
          }}
        >
          查看结果
        </AtButton>
      )}

      {currentNo > 1 && (
        <AtButton circle className="controlBtn" onClick={prevQuestion}>
          上一题
        </AtButton>
      )}
      <GlobalFooter />
    </View>
  );
};
